<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<style>
			body {
				height: 100%;
				width: 100%;
				background: url("img/beijing.jpg") no-repeat;
				background-size: 100% 100%;
			}
			#tup {
				height: 120px;
				width: auto;
				
				text-align: center;
			}
			
			#tub {
				height: 100px;
				width: 100px;
				margin-top: 10px;
				border-radius: 50px;
				border: 1px solid #545454;
			}
			#zhut {
				height: 600px;
				width: auto;
				
				margin-top: 10px;
				text-align: center;
				
			}
			.user{
				height: 30px;
				width: 300px;
				margin-bottom: 5px;
				padding-left:10px ;
				border-radius: 5px;
				text-color: #7A7A7A;
				border: 1px solid #545454;
				background-color: transparent;
			}
			#sub{
				height: 30px;
				width: 300px;
				padding-left:10px ;
				border-radius: 5px;
				color: #7A7A7A;
				border: 1px solid #545454;
				background-color: transparent;
			}
			.login{
				color: #7A7A7A;
			}
			/* -----------------------海外手机号提示 */
			.msg{
				
				font-size: 13px;
				color: #7A7A7A;
			}
			
			
		</style>
	</head>
	<body>
		<div id="tup">
					<img src="img/tubiao.png" id="tub">
		</div>
				<div id="zhut">
					<form action="#" method="post">
						<!-- ----------------------昵称------------- -->

						<p><input type="text" class="user" id="user_phone" placeholder="可使用手机号" />
						<span id="msg_phone" class="msg">
						<p><span id="msg_isphone" class="msg">
						<p><input type="password" class="user" id="user_pwd" placeholder="请输入您的密码" />
						<span id="msg_pwd" class="msg"></span>

							<!-- ---------注册------------------- -->
						<p><input type="button" id="sub" value="登录" />
						<p><span id="msg_zhuce" class="msg">
							正在登录...
						</span>
		
						<p class="login">
							<a href="./zk.html" class="login">注册新用户</a>
							<a href="./wangji.html" class="login">&nbsp;忘记密码</a>
						</p>
					</form>
				<div>	
				
				
				<script>
					let isPhoneZc = false   //  手机号是否已经注册过
					let sum =0  //      判断登录错误的次数
					
					
					// ---------------------密码为9位-----------------
						user_pwd.onblur = function(){
							let p = user_pwd.value
							console.log(p)
							if(p.length < 9){
								msg_pwd.innerHTML = "密码至少为9位"
							}else{
								msg_pwd.innerHTML = ""
							}	
							
						}
				// -------------------------判断手机号是否存在-------------------		
				user_phone.onblur = function(){
					let phone = user_phone.value
					// -----------------------------是否为11---------------------
					if(phone.length!==11){
						msg_phone.innerHTML = "手机号为11位"
						msg_isphone.innerHTML = ''
					}else{
						msg_phone.innerHTML = ""
						let xhr = new XMLHttpRequest()
						// http://127.0.0.1:3000/v1/user/phone?uphone=12345678911
						let url = `/v1/user/phone?uphone=${phone}`
						console.log(url)
						xhr.open('GET',url)
						xhr.onload = function(){
							let result = xhr.responseText
							console.log(result)
							console.log(result.length)
							
							if(result.length>2){
								isPhoneZc = true   //  手机号已经注册过
								msg_isphone.innerHTML = '手机号已注册'
								
							}else{
								isPhoneZc = false   //  手机号没有已经注册过
								msg_isphone.innerHTML = '未注册用户，请点击下方注册新用户'
							}
							
						}
						xhr.send()
						
					}
						
					
				}
						
			
						
						// -------------登录？---------------
					sub.onclick = function(){
						
						if(sum>=3 && isPhoneZc){
							msg_zhuce.innerHTML = '账号密码错误3次,请修改密码'
							return;
						}
						if(!isPhoneZc){
							msg_zhuce.innerHTML = '未注册用户，请点击下方注册新用户'
							return;
						}
						let uphone = user_phone.value
						let upwd = user_pwd.value
						
						let xhr = new XMLHttpRequest()
						let url = `/v1/user/login?uphone=${uphone}&pwd=${upwd}`
						console.log(url)
						xhr.open('GET',url)
						xhr.onload = function(){
							let result = xhr.responseText
							console.log(result.length)
							console.log(result[0].length)
							if(result.length>2){
								msg_zhuce.innerHTML = '登陆成功'
							}else{
								msg_zhuce.innerHTML = '账号密码错误'
								sum++;
							}	
							console.log('re2',result)
						}
						xhr.send()		
					}	
						
						
					
					
				</script>
		
	</body>
</html>